<template>
  <base-breadcrumb :breadcrumb="!isComponent">
    <a-spin :spinning="loadingState.isDetail">
      <a-form>
        <a-card
          :body-style="{ padding: '24px 32px' }"
          :bordered="false"
        >
          <title-name title="节点基本信息" />
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="工程名称"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.projectName"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="业务事项"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.businessMatters"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="节点状态"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.statusName"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="亮灯情况"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <!--<BaseInput v-model="dels.lighton" type="text" disabled></BaseInput>-->
                <div v-if="dels.promptLights == 1">
                  <img
                    src="../../../assets/icons/yellowLight.png"
                    width="20"
                  >
                </div>
                <div v-if="dels.promptLights == 2">
                  <img
                    src="../../../assets/icons/redLight.png"
                    width="20"
                  >
                </div>
                <div
                  v-if="dels.statusLights == 1"
                  class="lighton1"
                />
                <div
                  v-if="dels.statusLights == 2"
                  class="lighton2"
                />
                <div
                  v-if="dels.statusLights == 3"
                  class="lighton3"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="阶段/类别"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.type"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="管控级别"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.controLevel"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="周期"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.cycle"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="计划开始时间"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.startTime"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="计划完成时间"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.endTime"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="实际完成时间"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.completionTime"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="完成标准"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.standard"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="验证资料"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.validations"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!--<a-row :gutter="24">-->
          <!--<a-col :md="8" :sm="8">-->
          <!--<a-form-item-->
          <!--label="劳务分包商"-->
          <!--:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"-->
          <!--:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">-->
          <!--<BaseInput v-model="dels.laborSubcontractor" type="text" disabled></BaseInput>-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <!--</a-row>-->
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="第一责任人"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.firstResponsible"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="直接责任人"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.directlyResponsible"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="责任人反馈"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.feedback"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="责任人反馈详情"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.feedbackDeltails"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card
          v-if="dels.isWorkResult == 1"
          :body-style="{ padding: '24px 32px',margin:'30px 0 0 0 ' }"
          :bordered="false"
        >
          <title-name title="节点维护信息" />
          <a-row :gutter="24">
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="节点维护人"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.nodeMaintainer"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="节点维护时间"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.nodeMainTime"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="8" v-if="dels.statusLights!=2 || dels.statusLights!=3"> -->
            <a-col
              v-if="dels.statusLights!=2 && dels.statusLights!=3"
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="维护备注信息"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.remark"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- fix-审批展示和节点信息展示不一致bug dels.statusLights-->
          <!-- <a-row :gutter="24" v-if="isdelay==2 || isdelay==3"> -->
          <a-row
            v-if="(dels.statusLights==2 || dels.statusLights==3) && dels.workStatus != 4"
            :gutter="24"
          >
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="逾期类别"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.overdueType"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="逾期原因"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.overdueReason"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>

          <title-name
            v-if="(dels.statusLights==2 || dels.statusLights==3) && dels.workStatus != 4"
            title="有效赶工措施"
          />
          <a-row
            v-if="(dels.statusLights==2 || dels.statusLights==3) && dels.workStatus != 4"
            :gutter="24"
          >
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="劳动力资源"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.laborResources"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="劳动力赶工费用(万元)"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.laborResFee"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="机械设备资源"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.equipmentResources"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row
            v-if="(dels.statusLights==2 || dels.statusLights==3) && dels.workStatus != 4"
            :gutter="24"
          >
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="机械设备赶工费用(万元)"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.equipResFee"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="材料资源"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.materialResources"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="材料赶工费用(万元)"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.materialResFee"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="24" v-if="isdelay==2 || isdelay==3"> -->
          <a-row
            v-if="(dels.statusLights==2 || dels.statusLights==3) && dels.workStatus != 4"
            :gutter="24"
          >
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="安全管理措施"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.safetyMeasures"
                  type="textarea"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="安全管理赶工费用(万元)"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.safetyMeasureFee"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-item
                label="预计赶工费用(万)元"
                :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput
                  v-model="dels.estimatedRushCost"
                  type="text"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="第三方完成确认单"
                :label-col="{ lg: { span: 2}, sm: { span: 2 } }"
                :wrapper-col="{ lg: { span: 21 }, sm: { span: 21} }"
              >
                <a-table
                  bordered
                  :columns="columns"
                  :data-source="dels.thirdCommonIdList"
                >
                  <span
                    slot="serial"
                    slot-scope="text, record, index"
                  >{{ index + 1 }}</span>
                  <template
                    slot="action"
                    slot-scope="text, record, index"
                  >
                    <a
                      :href="'/api/ycloud-file-center/oper/download?access_token='+token+'&fileId='+record.fileId"
                      target="_parent"
                    >导出</a>
                  </template>
                </a-table>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="附件信息"
                :label-col="{ lg: { span: 2}, sm: { span: 2 } }"
                :wrapper-col="{ lg: { span: 21 }, sm: { span: 21} }"
              >
                <a-table
                  bordered
                  :columns="columns"
                  :data-source="dels.otherCommonIdList"
                >
                  <span
                    slot="serial"
                    slot-scope="text, record, index"
                  >{{ index + 1 }}</span>
                  <template
                    slot="action"
                    slot-scope="text, record, index"
                  >
                    <a
                      :href="'/api/ycloud-file-center/oper/download?access_token='+token+'&fileId='+record.fileId"
                      target="_parent"
                    >导出</a>
                  <!--<a-divider type="vertical"/>-->
                  <!--<a @click="handleEdit(record)">打印</a>-->
                  </template>
                </a-table>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>

        <div
          v-if="!isComponent"
          style="float:right;margin-top: 20px;margin-bottom: 20px;"
        >
          <a-button
            type="primary"
            @click="goBack"
          >
            关闭
          </a-button>
        </div>
      </a-form>
    </a-spin>
  </base-breadcrumb>
</template>

<script>
  import Vue from 'vue'
  import { getNodeDetails  } from '@/api/construction'

  const columns = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: '10%',
      scopedSlots: { customRender: 'serial' },
    },
    {
      title: '附件名称',
      dataIndex: 'fileName',
      width: '15%',
    },
    {
      title: '附件格式',
      dataIndex: 'suffixName',
      width: '15%',
    },
    {
      title: '附件地址',
      dataIndex: 'rootPath',
      width: '40%',
    },
    {
      title: '操作',
      key: 'action',
      width: '20%',
      scopedSlots: { customRender: 'action' },
    },
  ];
  const data = [
    {
      name: '一级',
      format: 120,
      address: 'income',
    },
    {
      name: '二级',
      format: 120,
      address: 'income',
    },
    {
      name: '三级',
      format: 120,
      address: 'income',
    },
  ];
  export default {
    name: 'StandardList',
    components: {
    },
    props: {
      text: String,
      // 是否作为组件引入
      isComponent: {
        type: Boolean,
        default: false
      },
      initData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        loadingState: {
          isDetail: false
        },
        data,
        columns,
        planId:'', // 计划下某项目进度id
        isdelay:'', //  是否延期 1 计划完成 2 延期完成 3 延期未完成
        dels:{},
        token:'',
        type:'',
        isRemark:false,
        reviewButton:null,
      }
    },
    created() {
      if(this.isComponent) {
        const { id, isdelay } = this.initData
        this.planId = id
        this.isdelay = isdelay
      } else {
        this.planId = this.$route.query.id
        this.isdelay = this.$route.query.isdelay
        this.type = this.$route.query.type
      }

      this.token = Vue.getAcloudProvider().getAccessToken()
      this.getNodeDetails()
    },
    methods: {
      goBack(){
        if(this.type == 'approve'){
          window.close()
        }else {
          this.$close()
        }

      },
      getNodeDetails(){
        this.loadingState.isDetail = true
        getNodeDetails(this.planId).then(res=>{
          this.loadingState.isDetail = false
          this.dels = res.data
        }).catch(() => {
          this.loadingState.isDetail = false
        })
      },

    }
  }
</script>

<style lang="less" scoped>
  .wrapper-row {
    padding-left: 55px;
    font-weight: bold;
    letter-spacing: 1px;
  }

  /deep/ .ant-form-item label {
    font-size: 12px;
  }

  /deep/ .ant-btn {
    border-radius: 5px;
  }

  /deep/ .ant-calendar-picker-input.ant-input {
    width: 100%;
  }

  /deep/ .ant-input {
    /*width: 70%;*/
    border-radius: 5px;
  }

  /deep/ .ant-calendar-picker {
    width: 100%;
    border-radius: 5px;
  }

  /deep/ .ant-card.ant-card-bordered {
    border-radius: 5px;
  }

  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
      line-height: 20px;
    }
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .title-name {
    border-left: 5px solid #1890ff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
    height: 20px;
    line-height: 20px;
  }

  /deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
    padding-left: 80px;
  }
  .lighton1{
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color:  rgba(224, 244, 223, 1);
  }
  .lighton2{
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color: rgba(251, 230, 232, 1);
  }
  .lighton3{
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color: rgba(240, 153, 164, 1);
  }
</style>
